/*
 * @Author: wangguanqing 
 * @Date: 2018-06-25 09:03:01 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-10-24 11:36:44
 */

<template>
  <div class="cyy_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
        <div slot="main" class="selfQuotient">
            <div class="map">
              <self-quotient-map v-model="mapData"></self-quotient-map>
            </div>
            <div class="dataDisplay">
              <top-logo-title>
                <div slot="topTitle">产业园内贸电商数据</div>
              </top-logo-title>
                <div class="chart">
                    <!-- 今日交易 本周交易 本月交易 -->
                    <div class="trade">
                      <div class="trade-item1">
                        <span class="font-text">今日交易</span>
                        <span class="font-number"><span style="font-size:38px;">￥</span>
                        <i-count-up
                          :startVal="startVal"
                          :endVal="totalData.tradingVolumeYesterday"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        />
                        </span>
                        <span class="font-text minText">同比</span>
                        <span class="font-number minNumber">{{Math.abs(totalData.tradingVolumeYesterdayRingRatio)}}%</span>
                        <i :class="totalData.tradingVolumeYesterdayRingRatio > 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
                      </div>
                      <div class="trade-item2">
                        <p>
                          <span class="font-text">本周交易</span>
                          <span class="font-number"><span>￥</span>
                            <i-count-up
                              :startVal="startVal"
                              :endVal="totalData.tradingVolumeThisWeek"
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            />
                          </span>
                          <span class="font-number-mini">{{Math.abs(totalData.tradingVolumeThisWeekRingRatio)}}%</span>
                          <i :class="totalData.tradingVolumeThisWeekRingRatio > 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
                        </p>
                        <p>
                          <span class="font-text">本月交易</span>
                          <span class="font-number"><span>￥</span>
                            <i-count-up
                              :startVal="startVal"
                              :endVal="totalData.tradingVolumeThisMonth"
                              :decimals="decimals"
                              :duration="duration"
                              :options="options"
                            />
                          </span>
                          <span class="font-number-mini">{{Math.abs(totalData.tradingVolumeThisMonthRingRatio)}}%</span>
                          <i :class="totalData.tradingVolumeThisMonthRingRatio > 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
                        </p>
                      </div>
                    </div>
                    <!-- 各店铺订单数 -->
                    <div class="shopOrder">
                        <main-title>
                          <span slot="title">各店铺订单量</span>
                        </main-title>
                        <pie-chart  :chartStyle="'width:500px'" v-model="shopOrderArr" :option="shopOrderOption"></pie-chart>
                    </div>
                    <!-- 近一年交易走势 -->
                    <div class="tradingIn">
                        <main-title>
                          <span slot="title">近一年交易走势</span>
                        </main-title>
                        <line-chart v-model="tradingInArr" :chartStyle="'width:422px;min-height:200px;'" :option="lineChartOption"></line-chart>
                    </div>
                    
                    <!-- 商品交易额排名 -->
                    <div class="shopHealthy">
                        <main-title>
                          <span slot="title">商品交易额排名</span>
                        </main-title>
                        <bar-chart v-model="proportionList" :chartStyle="'width:302px;min-height:400px;'" :option="barChartOption"></bar-chart>
                        <!-- <div slot="main" style="margin-top:32px;">
                          <div>
                            <table class="gridtable">
                              <tr>
                                <th class="dyFirstColumn">品名</th>
                                <th class="dySecondColumn">交易额</th>
                              </tr>
                            </table>
                          </div>
                          <div class="top10Scroll" style="height:216px;margin-top:4px">
                            <table class="gridtable">
                              <tr v-if="proportionList.length >= 1" v-for="(item, index) in proportionList" :key="index">
                                <td class="dyFirstColumn">{{item.name}}</td>
                                <td class="dySecondColumn flexTd">
                                  <div v-if="item.value !== 0" class="progressBar" :style="{ 'width':item.value/proportionList[0].value*100+'%' , 'background':item.color}">{{item.value}}</div>
                                  <div v-else class="progressBar" style="width:0">{{item.value}}</div>
                                </td>
                              </tr>
                              <div v-else class="tableNoData">暂无数据</div>
                            </table>
                          </div>
                        </div> -->
                    </div>
                </div>
                <div class="barrage">
                  <div class="barragerBox" style="width:100%;height:200px"></div>
                </div>
            </div>
        </div>
    </bg-lay-out>
  </div>
</template>
<script>
import topLogoTitle from "@/components/cyy/topLogoTitle";
import mainTitle from "@/components/cyy/mainTitle";
require("@/utils/jquery-barrager.js");
var interval = null;
import chart from "@/components/Charts/newChart";
import chartLayOut from "@/components/Charts/chartLayOut";
import barCharts from "@/components/Charts/barCharts";
import barChart from "@/components/Charts/barChart";
import lineChart from "@/components/Charts/lineChart";
import pieChart from "@/components/Charts/pieChart";
import ICountUp from "vue-countup-v2";
import bgLayOut from "@/components/bgLayOut/index";
import cyyMap from "@/components/cyy/cyyMap";
import selDate from "@/components/cyy/selDate";
import selfQuotientMap from "@/components/cyy/selfQuotientMap";
import {
  GetIndustrialParkEcommerceData,
  GetOrderDetalList,
  GetDataByTarget,
  GetDetailList,
  GetRegionalTransactionDistribution
} from "@/api/cyy/IndustrialParkForEcommerce";
export default {
  name: "sellAnalysis",
  components: {
    topLogoTitle,
    mainTitle,
    chart,
    ICountUp,
    bgLayOut,
    barCharts,
    barChart,
    lineChart,
    pieChart,
    selDate,
    cyyMap,
    chartLayOut,
    selfQuotientMap
  },
  data() {
    return {
      mapData: [], // 地图数据
      totalData: {
        tradingVolumeYesterday: 0,
        tradingVolumeTheDayBeforeYesterday: 0,
        tradingVolumeThisWeek: 0,
        tradingVolumeThisMonth: 0,
        tradingVolumeThisYear: 0,
        tradingVolumeYesterdayRingRatio: 0,
        tradingVolumeThisWeekRingRatio: 0,
        tradingVolumeThisMonthRingRatio: 0,
        tradingVolumeThisYearRingRatio: 0,
        volumeThisWeek: 0,
        volumeThisMonth: 0,
        volumeThisYear: 0,
        volumeThisWeekRingRatio: 0,
        volumeThisMonthRingRatio: 0,
        volumeThisYearRingRatio: 0
      }, // 页面总数据
      barChartOption: {
        grid: {
          left: "30%"
        },
        exchange: true,
        showLabel: true,
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            show: false,
            rotate: 0
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          }
        },
        barWidth: 20
      },
      todayIncome: 0,
      weekIncome: 0,
      monthIncome: 0,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      shopOrderArr: [],
      lineChartOption: {
        grid: {
          left: "15%"
        },
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(40,231,135,0.5)",
        endColor: "rgba(40,231,135,0.1)"
      },
      dealAreaOption: {
        xAxis: {
          // axisLabel: {
          //   rotate: 45
          // },
          axisTick: {
            interval: 0
          }
        },
        dataZoom: [
          {
            width: "75%",
            bottom: 49,
            left: "15%"
          }
        ],
        grid: {
          top: "10%",
          left: "15%"
        },
        color: "rgb(47,240,210)",
        startColor: "rgba(47,240,210,0.2)",
        lineIconId: 0,
        sumName: "成交面积"
      },
      tradingInArr: [],
      proportionList: [], // 商品交易额排名
      shopOrderOption: {
        color: ["#F0BD26", "#28E787", "#00D1FF"],
        radius: ["20%", "50%"],
        center: ["50%", "50%"],
        roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return (
            "{value|" + value.name + "}" + "\n" + "{large|" + value.value + "}"
          );
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      }
    };
  },
  mounted() {
    // this.setDate();
    this.getproportionListArr(); // 排名前五
    this.getTotalData(); // 获取页面总数据
    this.getTradingInArr(); // 年度交易趋势
    this.getShopOrderArr(); // 店铺订单量
    this.getMapDataArr(); // 获取地图数据
    this.getSetDanMuData(); // 获取弹幕数据
  },
  beforeDestroy() {
    clearInterval(interval);
  },
  methods: {
    // 获取页面总数据
    async getTotalData() {
      const res = await GetIndustrialParkEcommerceData();
      if (res.data.code === "0") {
        this.$set(this, "totalData", res.data.result);
        this.$set(this, "weekIncome", res.data.result.tradingVolumeThisWeek);
        this.$set(this, "monthIncome", res.data.result.tradingVolumeThisMonth);
      }
    },
    // 获取近一年交易总数据
    async getTradingInArr() {
      const p = {
        timeType: "3010",
        queryType: "34001"
      };
      const res = await GetDetailList(p);
      if (res.data.code === "0") {
        res.data.result.reList.forEach(item => {
          item.xData = item.xData.slice(5, item.xData.length);
        });
        this.$set(this, "tradingInArr", res.data.result.reList);
      }
    },
    // 店铺订单量
    async getShopOrderArr() {
      const p = {
        queryType: "34005"
      };
      const res = await GetDataByTarget(p);
      if (res.data.code === "0") {
        this.$set(this, "shopOrderArr", res.data.result);
      }
    },
    // 商品交易额前五
    async getproportionListArr() {
      const p = {
        queryType: "34001"
      };
      const res = await GetDataByTarget(p);
      if (res.data.code === "0") {
        var proportionList = [];
        for (var i = 0; i < res.data.result.length; i++) {
          switch (i) {
            case 0:
              res.data.result[i].barLinearColor = ["#F40F67", "#ED5A24"];
              break;
            case 1:
              res.data.result[i].barLinearColor = ["#F0BD26", "#F38F1E"];
              break;
            case 2:
              res.data.result[i].barLinearColor = ["#00FFFF", "#00D1FF"];
              break;
            default:
              res.data.result[i].barLinearColor = ["#28E787", "#008E45"];
          }
          proportionList.unshift(res.data.result[i]);
        }
        this.$set(this, "proportionList", proportionList);
      }
    },
    // 地图数据
    async getMapDataArr() {
      const res = await GetRegionalTransactionDistribution();
      if (res.data.code === "0") {
        this.$set(this, "mapData", res.data.result);
      }
    },
    // 弹幕数据
    async getSetDanMuData() {
      const res = await GetOrderDetalList();
      if (res.data.code === "0") {
        if (interval) {
          clearInterval(interval);
        }
        this.setDanMu(res.data.result);
        interval = setInterval(() => {
          this.setDanMu(res.data.result);
        }, 20000);
      }
    },
    // setDate() {
    // if (interval) {
    //   clearInterval(interval);
    // }
    // this.setDanMu();
    // interval = setInterval(() => {
    //   this.setDanMu();
    // }, 20000);
    // },
    setDanMu(res) {
      var self = this;
      var colorArr = ["#00D1FF", "#2FECCE", "#28E787", "#8693F3"];
      var dataArr = [];
      res.forEach(item => {
        var dataArrItem = {
          info: item.userName + " 刚刚购买了商品 " + item.orderDetail,
          price: item.orderAmount
        };
        dataArr.push(dataArrItem);
      });
      const index = Math.floor(Math.random() * dataArr.length);
      dataArr[index].bottom = Math.floor(Math.random() * 150 + 20);
      dataArr[index].close = false;
      dataArr[index].color = colorArr[Math.floor(Math.random() * 4 + 1) - 1];
      dataArr[index].speed = colorArr[Math.floor(Math.random() * 6 + 1)];
      var c = $(".barragerBox")[0].childElementCount;
      if (c < 10) {
        $(".barragerBox").barrager(dataArr[index]);
        if (self.todayIncome > this.totalData.tradingVolumeYesterday) {
          self.$set(self, "todayIncome", 0);
          self.$set(self, "weekIncome", this.totalData.tradingVolumeThisWeek);
          self.$set(self, "monthIncome", this.totalData.tradingVolumeThisMonth);
        } else {
          self.$set(
            self,
            "todayIncome",
            self.todayIncome + dataArr[index].price
          );
          self.$set(self, "weekIncome", self.weekIncome + dataArr[index].price);
          self.$set(
            self,
            "monthIncome",
            self.monthIncome + dataArr[index].price
          );
        }
        // if (self.weekIncome > 2500000) {
        //   self.$set(self, "weekIncome", 975678);
        // } else {
        //   self.$set(self, "weekIncome", self.weekIncome + dataArr[index].price);
        // }
        // if (self.monthIncome > 10000000) {
        //   self.$set(self, "monthIncome", 1583224);
        // } else {
        //   self.$set(
        //     self,
        //     "monthIncome",
        //     self.monthIncome + dataArr[index].price
        //   );
        // }
      }
    },
    setTableScroll() {
      var speed = 1000;
      var demo2 = $("#scroll2")[0];
      var demo1 = $("#scroll1")[0];
      var demo = $("#scroll0")[0];
      demo2.innerHTML = demo1.innerHTML;
      function Marquee() {
        if (demo2.offsetTop - demo.scrollTop <= 0) {
          demo.scrollTop -= demo1.offsetHeight;
        } else {
          demo.scrollTop++;
        }
      }
      var MyMar = setInterval(Marquee, speed);

      demo.onmouseover = function() {
        clearInterval(MyMar);
      };

      demo.onmouseout = function() {
        MyMar = setInterval(Marquee, speed);
      };
    },
    fetchData() {
      var proportionList = [
        {
          name: "衣架",
          value: 23434.52,
          barLinearColor: ["#28E787", "#008E45"]
        },
        {
          name: "毛巾",
          value: 33434.5,
          barLinearColor: ["#28E787", "#008E45"]
        },
        {
          name: "睡衣",
          value: 43434.5,
          barLinearColor: ["#00FFFF", "#00D1FF"]
        },
        {
          name: "水壶",
          value: 53434.5,
          barLinearColor: ["#F0BD26", "#F38F1E"]
        },
        {
          name: "瑜伽垫",
          value: 63434.5,
          barLinearColor: ["#F40F67", "#ED5A24"]
        }
      ];
      this.$set(this, "proportionList", proportionList);
    }
  }
};
</script>
<style>
@import "../../../../styles/jquery-barrager.css";
</style>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.selfQuotient {
  .map {
    @include absoluteAllSides(0, 0, 0, 0, 1);
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);
    & .chart {
      @include absoluteAllSides(150, 40, 150, 75, 1);
      & .trade {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        color: #00ffff;
        .font-number {
          padding: 0 20px;
          margin: 0 3px;
          background-color: rgba(#000, 0.5);
          span {
            font-family: DIN Condensed Bold;
            margin-right: -10px;
          }
        }
        .trade-item1 {
          .font-text {
            font-size: 35px;
          }
          .font-text.minText {
            font-size: 27px;
          }
          .font-number {
            color: #ffcb2f;
            @include din(80px);
          }
          .font-number.minNumber {
            @include din(55px);
          }
        }
        .trade-item2 {
          display: flex;
          .font-text {
            font-size: 26px;
          }
          .font-number {
            color: #ffcb2f;
            @include din(48px);
            span {
              margin-right: -7px;
              font-size: 48px;
            }
          }
          .font-number-mini {
            color: #ffcb2f;
            @include din(30px);
            padding: 0 20px;
            margin: 0 3px;
            background-color: rgba(#000, 0.5);
          }
          p:nth-of-type(2) {
            margin-left: 10px;
            & .font-text {
              font-size: 26px;
            }
            & .font-number {
              color: #ffcb2f;
              @include din(48px);
              span {
                margin-right: -7px;
                font-size: 48px;
              }
            }
            .font-number-mini {
              color: #ffcb2f;
              @include din(30px);
              padding: 0 20px;
              margin: 0 3px;
              background-color: rgba(#000, 0.5);
            }
          }
        }
      }
      & .el-icon-caret-top {
        position: static;
        margin-left: -5px;
        color: #ed1e79;
        font-size: 25px;
      }
      & .el-icon-caret-bottom {
        position: static;
        margin-left: -5px;
        color: #28e787;
        font-size: 25px;
      }
      & .el-icon-d-arrow-right {
        margin-right: 5px;
      }
      & .top10Scroll {
        overflow-y: scroll;
      }
      .shopOrder {
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .tradingIn {
        position: absolute;
        top: 0;
        right: 0;
      }
      .shopHealthy {
        position: absolute;
        bottom: 100px;
        right: 35px;
        width: 388px;
        .progressBar {
          display: inline-block;
          display: flex;
          align-items: center;
          height: 34px;
          color: #000000;
          @include din(20px);
          text-indent: 5px;
        }
        table.gridtable {
          font-size: 16px;
          color: white;
          width: 100%;
          height: 100%;
          overflow: scroll-y;
        }
        table.gridtable th {
          padding: 8px;
          height: 40px;
          /* border-right: 1px solid rgba(#2ff0d2, 0.3) ; */
          /* background: rgba($color: #00d1ff, $alpha: 0.2); */
          background-color: rgba(#00d1ff, 0.2);
          color: #2ff0d2;
        }
        table.gridtable th:last-child {
          border-right: none;
        }
        table.gridtable td {
          height: 43px;
          padding: 8px;
          // border-right: 1px solid rgba(#2ff0d2, 0.3);
          background-color: rgba(0, 0, 0, 0);
          color: #00d1ff;
        }
        table.gridtable td:last-child {
          border-right: none;
        }
        table.gridtable .firstColumn {
          width: 20%;
          text-align: center;
        }
        table.gridtable .secondColumn {
          width: 50%;
          text-align: left;
        }
        table.gridtable .thirdColumn {
          width: 30%;
          text-align: left;
        }
        table.gridtable .dyFirstColumn {
          width: 20%;
          text-align: right;
          color: #2ff0d2;
        }
        table.gridtable .dySecondColumn {
          text-align: left;
        }
        table.gridtable .dyThirdColumn {
          width: 25%;
          text-align: right;
        }
        table.gridtable .flexTd {
          display: flex;
          align-items: center;
          float: left;
          width: 100%;
        }
      }
    }
    & .barrage {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 150px;
    }
  }
}
</style>